<template>
  <div class="recording-box">
    <div class="select">
      <div class="left-s">
        <span>图片类型：</span>
        <el-select v-model="imgType" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="right-s">
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          class="demo-form-inline"
          :inline="true"
        >
          <el-form-item size="small">
            <el-input
              v-model.trim="form.searchVideo"
              placeholder="请输入查询关键字"
            ></el-input>
          </el-form-item>
          <el-button
            type="goon"
            class="searchBut"
            size="small"
            icon="iconfont icon-sousuo"
            v-on:click="search()"
          >
          </el-button>
          <el-button
            type="info"
            icon="iconfont icon-Group fs"
            @click="upload"
            v-if="isDelete"
            >上传图片
          </el-button>
          <el-button
            type="info"
            icon="el-icon-delete"
            @click="deleteAll"
            v-if="isDelete"
            :disabled="!flag"
            >批量删除
          </el-button>

          <div class="buttons" v-else>
            <el-button type="warning">全选</el-button>
            <el-button type="success">确定</el-button>
            <el-button type="warning" @click="cancel()">取消</el-button>
          </div>
        </el-form>
      </div>
    </div>
    <!-- content -->
    <div class="content" v-if="imgList.length > 0">
      <!-- 视频列表 -->
      <div class="dataList-box">
        <div class="main-part" @click="imgPro">
          <div class="videoImg">
            <img
              src="~@/assets/images/mo_bg.png"
              onerror="this.src='~@/assets/images/img-lose1.png'"
            />
          </div>
          <!-- 蒙版 -->
          <div class="mask"></div>
          <!-- 录制错误出现 -->
        </div>
        <!-- 标题 -->
        <div class="videoTip">
          <div class="tip">{{ tip | capturename }}</div>
          <div class="collect" @click="collectdata()">
            <img
              v-if="collectionState == 0 || collectionState == 1"
              :src="collectionState == 0 ? img1 : img2"
              alt=""
            />
          </div>
        </div>
        <!-- 详情 删除 截图 审核 -->
        <div class="bottom-box">
          <div class="detailItem" :title="lookDetail" @click="detail()" >
            <i class="iconfont icon-bianji"></i> 详情
          </div>
          <div class="screenshot" title="下载" >
            <i class="iconfont icon-icon_xiazai"></i> 下载
          </div>
          <div class="deleteItem" :title="lookDelete" @click="imgDelete()">
            <i class="iconfont icon-shanchu"></i> 删除
          </div>
        </div>
        <!-- 批量删除遮罩层 -->
        <div class="maskAll" v-if="isShow" @click="fnClick()">
          <i
            class="iconfont xuan"
            :class="[
              isSelected == 1 || isSelectAll == 1
                ? 'icon-xuanzhong'
                : 'icon-weixuanzhongyuanquan',
            ]"
          ></i>
        </div>
      </div>
    </div>
    <!-- 空 -->
    <div class="nodataDiv" v-else>
      <div>
        <div class="nodata"></div>
        <div class="nodataText">暂无内容</div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="pagination" v-if="imgList.length > 0">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout=" prev, pager, next,jumper,total"
        :total="totals"
        prev-text="上一页"
        next-text="下一页"
      >
      </el-pagination>
    </div>
    <!-- 上传图片 -->
    <el-dialog
      title="图片上传"
      :visible.sync="uploadTag"
      width="640px"
      top="14vh"
      custom-class="up"
      @close="closeUpload"
    >
      <el-form
        ref="uploadData"
        :rules="rules1"
        :model="uploadData"
        label-width="100px"
      >
        <el-form-item label="图片类型：" prop="imgType">
          <el-upload
            class="upload-demo"
            action
            :show-file-list="false"
            :auto-upload="false"
            :on-change="handleAvatarChange"
            :on-success="handleSuccess"
            ref="uploadY"
          >
            <el-button
              size="small"
              type="info"
              icon="iconfont icon-Group fs"
              v-if="butF"
            >
              上传文件</el-button
            >
            <el-button
              v-else
              size="small"
              type="success"
              icon="iconfont icon-chongxin "
            >
              重新上传</el-button
            >
          </el-upload>
          <div class="tip">
            <div>*支持上传格式：JPG、PNG、JPEG</div>
            <div>*仅支持单张图片上传，上传文件&lt;200MB</div>
          </div>
        </el-form-item>
        <el-form-item label="图片名称：" prop="imgName">
          <el-input
            v-model.trim="uploadData.imgName"
            placeholder="此处为上传图片的名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注信息：" prop="remark">
          <el-input
            type="textarea"
            placeholder="最多支持500个中英文字符"
            v-model.trim="uploadData.remark"
            maxlength="500"
            show-word-limit
            :autosize="{ minRows: 11, maxRows: 11 }"
            resize="none"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="success"
          @click="submitUpload()"
          style="margin-right: 60px"
          >确 定</el-button
        >
        <el-button type="warning" @click="uploadTag = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 收藏弹框 -->
    <el-dialog title="信息" :visible.sync="isCollect" width="470px" top="30vh">
      <div class="shou">是否{{ msg1 }}该照片</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="submitCollect()">确 定</el-button>
        <el-button type="info" @click="isCollect = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 预览图片弹框 -->
    <el-dialog
      title="图片预览"
      :visible.sync="preview"
      width="975px"
      top="8vh"
      custom-class="preview"
    >
      <el-carousel
        indicator-position="outside"
        height="550px"
        :autoplay="false"
      >
        <el-carousel-item v-for="item in 2" :key="item">
          <div class="lookImg">
            <img src="~@/assets/images/mo_bg.png" alt="" />
          </div>
        </el-carousel-item>
      </el-carousel>

      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
    <!-- 详情弹框 -->
    <el-dialog
      title="图片详情"
      :visible.sync="detailImg"
      width="12rem"
      top="15vh"
      custom-class="detail-img"
      @close="closeDialog"
    >
      <div class="detail-box">
        <div class="left-con">
          <div class="imgShow">
            <img src="~@/assets/images/mo_bg.png" alt="" />
          </div>
          <ul>
            <li class="item">
              <span class="title">
                <i class="iconfont icon-aims"></i>图片名称
              </span>
              <span class="con">{{ imgTitleName | capturename }}</span>
            </li>
            <li class="item">
              <span class="title">
                <i class="iconfont icon-aims"></i>用户名称
              </span>
              <span class="con">pamir</span>
            </li>
            <li class="item">
              <span class="title">
                <i class="iconfont icon-aims"></i>上传时间
              </span>
              <span class="con">2021-08-06 17:47:33</span>
            </li>
            <li class="item">
              <span class="title">
                <i class="iconfont icon-aims"></i>图片格式
              </span>
              <span class="con">jpg</span>
            </li>
            <li class="item">
              <span class="title">
                <i class="iconfont icon-aims"></i>图片大小
              </span>
              <span class="con">112.85KB</span>
            </li>
            <li class="item">
              <span class="title">
                <i class="iconfont icon-aims"></i>分辨率
              </span>
              <span class="con">1286 * 854像素</span>
            </li>
          </ul>
        </div>
        <div class="right-con">
          <div class="content">
            <el-form
              ref="imgData"
              :rules="rules"
              :model="imgData"
              label-width="120px"
            >
              <el-form-item label="图片名称：" prop="imgName">
                <el-input
                  v-model.trim="imgData.imgName"
                  placeholder="请输入图片名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="备注信息：" prop="remark">
                <el-input
                  type="textarea"
                  placeholder="最多支持500个中英文字符"
                  v-model.trim="imgData.remark"
                  maxlength="500"
                  show-word-limit
                  :autosize="{ minRows: 11, maxRows: 11 }"
                  resize="none"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button
              type="success"
              @click="saveImg('imgData')"
              style="margin-right: 60px"
              >保 存</el-button
            >
            <el-button type="warning" @click="detailImg = false"
              >取 消</el-button
            >
          </div>
        </div>
      </div>
      <div slot="footer"></div>
    </el-dialog>
    <!-- 删除弹框 -->
    <el-dialog
      title="温馨提示"
      :visible.sync="deleteImg"
      width="400px"
      top="30vh"
    >
      <div class="shou">删除图片后暂不支持回收站恢复功能 !</div>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="success"
          @click="submitImg()"
          style="margin-right: 60px"
          >确 定</el-button
        >
        <el-button type="warning" @click="deleteImg = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import img1 from "@/assets/images/ico_shoucang_normal@2x.png";
import img2 from "@/assets/images/ico_shoucang_click@2x.png";
import "@/assets/css/personalResources.less";
export default {
  name: "ImageFile", //图片资源
  data() {
    return {
      imgType: "",
      imgList: [1, 2, 3],
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "1",
          label: "JPG",
        },
        {
          value: "2",
          label: "PNG",
        },
        {
          value: "3",
          label: "JPNG",
        },
      ],
      form: {
        searchVideo: "",
      },
      img1: img1,
      img2: img2,
      isCollect: false, //大图预览弹框
      params: {
        pageNumber: 1,
        pageSize: 8,
      },
      isDelete: true, //批量删除
      flag: 0, //置灰标识
      currentPage: 1,
      pageSize: 8,
      totals: 800,
      isSelected: 0,
      isSelectAll: 0,
      tip: "hahahhahahhahahhahahhahahhahahhahahhahahhahahhahahhahahhahah", //标题
      collectionState: 0, //收藏
      lookDetail: "查看详情",
      lookDelete: "删除",
      isShow: false,
      msg1: "收藏",
      preview: false, //图片预览
      imgTitleName:
        "hahahhahahhahahhahahhahahhahahhahahhahahhahahhahahhahahhahah",
      deleteImg: false,
      detailImg: false,
      imgData: {
        imgType: "",
        imgName: "",
        remark: "", //备注
      },
      rules: {
        imgName: {
          required: true,
          message: "图片名称不能为空",
          trigger: "change",
        },
      },
      uploadTag: false,
      uploadData: {
        //上传图片数据
        imgType: "",
        imgName: "",
        remark: "", //备注
      },
      rules1: {
        imgType: {
          required: true,
          message: "请选择文件",
          trigger: "change",
        },
        imgName: {
          required: true,
          message: "图片名称不能为空",
          trigger: "change",
        },
      },
      butF: true,
    };
  },
  methods: {
    getList() {
      if (this.imgList.length > 0) {
        this.flag = 1;
      } else {
        this.flag = 0;
      }
    },
    //分页 页码数量
    handleSizeChange: function (val) {
      this.params.pageNumber = 1;
      this.params.pageSize = val;
      this.currentPage = 1;
      this.getList();
    },
    // 当前页
    handleCurrentChange: function (val) {
      this.params.pageNumber = val;
      this.getList();
    },
    //删除
    deleteAll() {
      this.isDelete = false;
      this.isShow = true;
    },
    cancel() {
      this.isDelete = true;
      this.isShow = false;
    },
    // 单选
    fnClick() {
      if (this.isSelected == 0) {
        this.isSelected = 1;
      } else {
        this.isSelected = 0;
      }
    },
    // 收藏
    collectdata() {
      if (this.collectionState == 0) {
        this.msg1 = "收藏";
        this.isCollect = true;
      } else {
        this.msg1 = "取消收藏";
        this.isCollect = true;
      }
    },
    submitCollect() {
      if (this.collectionState == 0) {
        this.collectionState = 1;

        this.isCollect = false;
      } else {
        this.collectionState = 0;
        this.isCollect = false;
      }
    },
    // 图片预览
    imgPro() {
      this.preview = true;
    },
    submitImg() {
      this.deleteImg = false;
    },
    // 删除图片
    imgDelete() {
      this.deleteImg = true;
    },
    // 详情保存图片
    saveImg(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.$layer.msg("图片修改成功");
          this.detailImg = false;
        } else {
          this.$layer.msg("更新失败");
          return false;
        }
      });
    },
    detail() {
      this.detailImg = true;
    },
    // 清除图片详情验证
    closeDialog: function () {
      this.$refs.imgData.resetFields();
    },
    // 清除上传图片验证
    closeUpload: function () {
      this.$refs.uploadData.resetFields();
      this.$refs.uploadY.clearFiles();
      this.butF = true;

      // this.$refs.uploadList.clearFiles();
    },
    // submitForm(ruleForm) {},
    // 上传
    upload() {
      this.uploadTag = true;
    },
    //确定上传
    submitUpload() {},
    // 上传文件
    handleAvatarChange(file, filelist) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      console.log(file, filelist, "上传文件");
      this.uploadData.imgName = file.name.split(".")[0];
      this.butF = this.uploadData.imgName ? false : true;
      if (filelist.length > 0) {
        filelist.splice(0, 1);
      }
    },
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList, "成功");
      this.$refs.uploadY.clearFiles();
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style lang="less">
@color: #4a69a4;
.detail-img .el-dialog__body {
  padding: 0;
}
.up {
  .el-input__inner,
  .el-textarea {
    width: 90%;
  }
  .el-form-item__label {
    font-size: 15px;
  }
  .el-upload {
    width: 100%;
    text-align: left;
    .el-button--info {
      width: 116px;
      &:focus,
      &:hover {
        background-color: @color;
        border-color: @color;
      }
    }
    .el-button--success {
      width: 116px;
      &:focus,
      &:hover {
        background-color: #f15151;
        border-color: #f15151;
      }
    }
  }
}
</style>
<style lang='less' scoped>
.preview {
  .el-dialog__body {
    padding: 10px 50px 0;
  }
  .el-carousel__indicators--outside {
    opacity: 0;
  }
  .lookImg {
    width: 100%;
    height: 550px;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.detail-img {
  .detail-box {
    width: 100%;
    height: 5.8rem;
    display: flex;
    justify-content: space-evenly;
    .left-con {
      width: 4.4rem;
      height: 100%;
      padding: 20px 10px 10px;
      box-sizing: border-box;
      border-right: 0.01rem solid #172449;
      .imgShow {
        width: 3.9rem;
        height: 2.08rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item {
        margin-top: 0.25rem;
        font-size: 15px;
        .title {
          color: #7fdbfd;
          display: inline-block;
          width: 120px;
          i {
            margin-right: 10px;
          }
        }
        .con {
          color: #fff;
        }
      }
    }
    .right-con {
      width: 5.7rem;
      height: 100%;
      padding: 20px 10px 10px;
      .content {
        width: 100%;
        height: 4.6rem;
        color: #fff;
      }
      .dialog-footer {
        text-align: center;
        margin-left: 90px;
        margin-top: 15px;
      }
    }
  }
}
// 上传
.up {
  // 上传
  .upload-demo {
    width: 120px;
    float: left;
  }
  .tip {
    float: left;
    height: 40px;
    line-height: 20px;
    margin-left: 15px;
    div {
      color: #f93131;
      font-size: 0.16rem;
    }
  }
}
.fs {
  font-size: 0.25rem !important;
}
</style>
